<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>11-Vue中css动画原理</title>
	<script src="vue.js"></script>
</head>
<style>
	.v-enter{
		opacity: 0;
	}
	.v-enter-active{
		transition: opacity 3s;
	}
	.v-leave-to{
		opacity: 0;
	}
	.v-leave-active{
		transition: opacity 3s;
	}
</style>
<body>
	<div id="app">
		<transition>
			<div v-if="show">hello world</div>
		</transition>
		<button @click="clickMethod">点击切换</button>
	</div>
</body>
<script>
	var vm=new Vue({
		el:'#app',
		data:{
			show:true
		},
		methods:{
			clickMethod:function(){
				this.show=!this.show;
			}
		}
	})
</script>
</html>